import { IFlexLayoutElement } from "./IElement.js";
import { IEventChange } from "./IEvent.js";
import { IText, ITextCharacter } from "./IText.js";

export class ICheckBoxIcon extends ITextCharacter {
    constructor() {
        super(true);
        this.SetTagName("ICheckBoxIcon");
        this.SetFontFamily("iconfont");
        this.SetPaddingRight(4);
        this.SetChecked(false);
    }

    SetChecked(checked) {
        if (this.m_checked === checked) return;
        this.m_checked = checked;
        if (checked) {
            this.SetValue("icon-checkbox-checked");
        } else {
            this.SetValue("icon-checkbox");
        }
        this.Refresh();
    }

    IsChecked() {
        return this.m_checked;
    }
}

export class ICheckBox extends IText {
    constructor() {
        super();
        this.SetTagName("ICheckBox");
        this.SetPadding(this.GetThemePaddingTopBottom(), this.GetThemePaddingTopBottom());
        this.SetStyleDisplay("inline-flex");

        this.m_icon = new ICheckBoxIcon();
        this.m_value = "";

        this.SetAttributeSetterGetter("checked", (value) => { this.SetChecked(value); });
        this.SetAttributeSetterGetter("label", (value) => { this.SetText(value); })
        this.SetAttributeSetterGetter("value", (value) => { this.SetValue(value); });
    }

    SetChecked(checked) { this.m_icon.SetChecked(checked); }
    IsChecked() { return this.m_icon.IsChecked(); }
    SetValue(value) { this.m_value = value; }
    GetValue() { return this.m_value; }

    SetText(text) {
        super.SetText(text);
        this.InsertChildren(this.m_icon, this.GetChildrens()[0]);
    }

    OnClick(event) {
        this.m_icon.SetChecked(!this.m_icon.IsChecked());

        this.OnChange();

        const parent = this.GetParent();
        if (parent instanceof ICheckBoxGroup) {
            parent.OnChange();
        }
    }

    OnChange() {
        const event = new IEventChange();
        event.SetValue(this.value);
        this.DispatchEvent(event);
    }

    // 设置值的方法
    set value(checked) {
        this.SetChecked(checked);
    }

    get value() {
        return this.IsChecked();
    }
}

export class ICheckBoxGroup extends IFlexLayoutElement {
    constructor() {
        super();
        this.SetTagName("ICheckBoxGroup");
        this.SetStyleDisplay("inline-flex");
        this.SetStyleFlexDirection("row");
        this.SetStyleJustifyContent("space-around");
    }

    OnChange() {
        const childrens = this.GetChildrens();
        const values = []
        for (let i = 0; i < childrens.length; i++) {
            const children = childrens[i];
            if (children instanceof ICheckBox) {
                if (children.IsChecked()) {
                    values.push(children.GetValue());
                }
            }
        }

        const event = new IEventChange();
        event.SetValue(values);
        this.DispatchEvent(event);
    }

    set value(values) {
        if (!Array.isArray(values)) return;
        const childrens = this.GetChildrens();
        for (let i = 0; i < childrens.length; i++) {
            const children = childrens[i];
            if (children instanceof ICheckBox) {
                const value = children.GetValue();
                if (values.includes(value)) {
                    children.SetChecked(true);
                } else {
                    children.SetChecked(false);
                }
            }
        }
    }
}

export class CheckBox extends ICheckBox {
    constructor() {
        super();
        this.SetTagName("CheckBox");
    }
}

export class CheckBoxGroup extends ICheckBoxGroup {
    constructor() {
        super();
        this.SetTagName("CheckBoxGroup");
    }
}   